<template>
  <div>
    <div class="top-content">
      <div class="top-title">选项:</div>

      <el-checkbox>显示2</el-checkbox>

      <div class="top-content-class">
        <div class="model-class">
          <el-radio></el-radio>
          <div class="label-top">模型文件:</div>
          <el-select class="model-select"><el-option></el-option></el-select>
        </div>
        <div class="model-class">
          <div class="label">缩放比例:</div>
          <el-input></el-input>
          <el-slider class="slider-class"></el-slider>
        </div>
      </div>
    </div>
    <div class="bottom-content">
      <div class="bottom-title">数据门限:</div>
      <el-checkbox>使用</el-checkbox>
      <div class="text-class">
        <span>最大的观察距离</span>
        <span class="right-span-cls">最大的观察距离</span>
      </div>
      <div class="all-class">
        <div class="union-class">
          <div class="label">所有:</div>
          <el-input></el-input>
          <el-select style="margin-left: -54px; margin-right: 10px"
            ><el-option></el-option
          ></el-select>
          <el-slider></el-slider>
        </div>
        <div class="union-class">
          <div class="label" style="margin-left: 10px">标记:</div>
          <el-input></el-input>
          <el-select style="margin-left: -55px; margin-right: 10px"
            ><el-option></el-option
          ></el-select>
          <el-slider></el-slider>
        </div>
      </div>
      <div class="union-class2">
        <div class="left-sign">标记标注:</div>
        <div style="float: left">
          <el-row
            ><el-col :span="8"><el-input></el-input></el-col>

            <el-col :span="8"
              ><el-select class="float-class"
                ><el-option></el-option></el-select></el-col
            ><el-col :span="8"><el-slider></el-slider></el-col
          ></el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
/deep/.el-slider__runway {
  border-radius: 0 !important;
  width: 74px !important;
}
/deep/.el-slider__button {
  border-radius: 0 !important;
  background-color: #00c3d9;
  border: 0;
  width: 8px;
}
/deep/.el-slider__button {
  right: 140px;
}
.top-content-class {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/deep/.top-content-class .el-select {
  width: 140px !important;
}
/deep/.top-content-class .el-select .el-input__inner {
  width: 140px !important;
}
/deep/.top-content-class .el-input .el-input__inner {
  width: 140px !important;
}
/deep/.radio-class {
  margin-left: 0 !important;
}
.top-content,
.bottom-content {
  margin-top: 46px;
  margin-left: 40px;
}
.top-title,
.bottom-title {
  margin-bottom: 22px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  font-family: Microsoft YaHei;
}
.bottom-title {
  margin-top: 62px;
  margin-bottom: 22px;
}
.text-class {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  margin-bottom: 16px;
}
.all-class {
  display: flex;
  justify-content: flex-start;
}

.union-class {
  display: flex;
  align-items: center;
}
.label-top {
  width: 100px;
  margin-left: -29px;
}
.label {
  width: 100px;
}
.union-class2 {
  margin-top: 10px;
}
/deep/.union-class .el-select {
  width: 60px !important;
}
/deep/.union-class .el-select .el-input__inner {
  width: 60px !important;
}
/deep/.union-class .el-input .el-input__inner {
  width: 60px !important;
}
/deep/.union-class2 .el-select {
  width: 60px !important;
}
/deep/.union-class2 .el-select .el-input__inner {
  width: 60px !important;
}
/deep/.union-class2 .el-input .el-input__inner {
  width: 60px !important;
}
.left-sign {
  float: left;
  margin-right: 10px;
}
/deep/.float-class {
  margin-left: -8px !important;
  margin-right: 15px !important;
}
.model-class {
  display: flex;
  align-items: center;
  margin-right: 100px;
}
.model-select {
  margin: 0 10px 0 -37px !important;
}
.slider-class {
  margin-left: -28px;
}
.el-checkbox {
  color: #fff;
}
.right-span-cls {
  margin-right: 450px;
}
</style>
